<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
	<meta charset="utf-8" />
	<style type="text/css">
		body{
		  position: relative;
		  width:100vw;
		  height: 100vh;
		  margin: 0;
		}
		canvas{
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  margin-left: -150px;
		  margin-top: -150px;
		  border: 1px dashed rgba(0,0,0,0.1);
		  background: -webkit-linear-gradient(top, #1B3A67, #0E2244);
      background: -moz-linear-gradient(top, #1B3A67, #0E2244);
      background: -o-linear-gradient(top, #1B3A67, #0E2244);
      background: -ms-linear-gradient(top, #1B3A67, #0E2244)
		}
	</style>
</head>
<body>
	<canvas id="c" width="600px" height="500px"></canvas>
 	<input type="range" id="r" min="0" max="100" step="1">
	<script type="text/javascript">
		var canvas = document.getElementById('c');
		var ctx = canvas.getContext('2d');
		// var range = document.getElementById('r');

		//range控件信息
		// var rangeValue = range.value;
		var nowRange = 40;   //用于做一个临时的range

		//画布属性
		var mW = canvas.width = 350;
		var mH = canvas.height = 350;
		var lineWidth = 1;

		//圆属性
		var r = mH / 2; //圆心
		var cR = r - 32 * lineWidth; //圆半径

		//Sin 曲线属性
		var sX = 0;
		var axisLength = mW; //轴长
		var waveWidth = 0.027 ;   //波浪宽度,数越小越宽    
		var waveHeight = 6; //波浪高度,数越大越高
		var speed = 0.03; //波浪速度，数越大速度越快
		var xOffset = 0; //波浪x偏移量

		ctx.lineWidth = lineWidth;

		//画sin 曲线函数

		var drawSin = function(xOffset, color, waveHeight, siteH){
	    ctx.save(); 		// 存储当前画布的样式等
	    var points=[];  //用于存放绘制Sin曲线的点
	    ctx.beginPath();
	    //在整个轴长上取点 , sx = 0; axisLength 是x轴轴长
	    for(var x = sX; x < sX + axisLength; x += Math.PI/6){
        //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
        var y = Math.sin((sX + x) * waveWidth + xOffset) * 0.8 + 0.1;
        var dY = mH * (1 - nowRange / 100 ) * siteH; 
        // 因为坐标系起点是左上角，所以y轴0点位置要用1-nowRange的差。
        points.push([x, dY + y * waveHeight]); // 存储点
        ctx.lineTo(x, dY + y * waveHeight);    // 描路径  
	    }
	    ctx.stroke()
	    ctx.restore(); // 恢复上一次ctx.save() 存储的，一定要有save()才有效，无默认。
		};

		var render = function(){
			ctx.clearRect(0, 0, mW, mH);

			drawSin(xOffset+Math.PI*0.7, 'rgba(255, 255, 255, 0.2)', 28, 1);
			// drawSin(xOffset, 'rgba(255, 255, 255, 0.2)', 18, 1.1);
			// drawSin(xOffset+Math.PI*1.3, 'rgba(255, 255, 255, 0.2)', 38, 1.2);
			// drawText(); 

			xOffset += speed;
			requestAnimationFrame(render);
		}
		//写百分比文本函数
		var drawText = function(){
			ctx.save();

			// var size = 0.4*cR;
			// ctx.font = size + 'px Microsoft Yahei';
			// ctx.textAlign = 'center';
			// ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
			// ctx.fillText(~~nowRange + '%', r, r + size / 2);

			ctx.restore();
		};

		render();

	</script>
</body>
</html>